<template>
	<div class="bookdetail">
		<router-link to="/mobile/home" class="el-icon-arrow-left
		"></router-link>

		<p class="top">书籍详情</p>
		<div class="hr"></div>

		<!-- 标题 -->
		<div class="title">
			<p>{{detail.name}}</p>
		</div>

		<div class="box">
			<div class="bookimg">
				<img :src="`http://127.0.0.1/api/public/showimg/${detail.pic}`" />
			</div>

			<div class="box_text">
				<p>作者:{{detail.author}}</p>
				<p>书号:{{detail.sn}}</p>
				<p>出版日期:
					{{filterTime(detail.tmake)}}
				</p>

				<button><i class="el-icon-shopping-cart-2">加入购物车</i></button>
				<button>立刻购买</button>
			</div>
		</div>

		<div class="detail">
			<p class="p1">简介</p>
			<p class="p2">
				{{detail.info}}
			</p>

		</div>
		<div class="massage">
			<div class="massage_top">
				<button @click="go2BookDetail()">查看书籍详情</button>
				<button @click="go2Comment()">查看评论</button>
			</div>
		</div>
		
		<div class="show" v-show="type==1">
			<p>暂无介绍</p>
		</div>
		
		<div class="show" v-show="type==2">
			<p>用户1: 1111111111111111111</p>
			<p>用户2: 1111111111111111111</p>
			<p>没有更多评论</p>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		name: 'MobileDetail',
		data() {
			return {
				detail: {},
				type:0 //查看书籍详情 2.查看评论
			}
		},
		computed: {
			filterTime() {
				return (t) => {
					let year = new Date(t).getFullYear();
					let month = new Date(t).getMonth() + 1;
					let data = new Date(t).getDate();
					return `${year}年${month}月${data}日`;
				}
			}
		},
		methods:{
			go2BookDetail(){
				this.type=1;
			},
			go2Comment(){
				this.type=2;
			}
		},
		mounted() {
			let a = this.$route.params.bookid
			console.log(a);
			this.$axios.get("http://127.0.0.1/api/public/book/findById/" + a).then((resp) => {
				console.log(resp.data.data);
				this.detail = resp.data.data;
				console.log(this.detail);
			})
		}
	}
</script>

<style scoped>
	.bookdetail {
		background-color: rgba(50, 50, 50, 0.5);
		height: 60rem;
	}

	.el-icon-arrow-left {
		color: white;
		position: absolute;
		margin-top: 0.8rem;
		margin-left: 0.5rem;
	}

	.top {
		text-align: center;
		line-height: 2.5rem;
		color: white;
	}

	.bookdetail .hr {
		border: 0.05rem solid gray;
	}

	.bookdetail .title p {
		margin-top: 1rem;
		color: white;
		text-align: center;
		line-height: 3rem;
		font-size: 1.5rem;
	}

	.bookdetail .box {
		display: flex;
		margin: 0rem 0.5rem;
		justify-content: space-between;

	}

	.bookdetail .box .bookimg {
		
		width: 50%;
	}

	.bookdetail .box .box_text {
		/* background-color: red; */
		width: 50%;
		margin: 1rem 0.5rem;
	}

	.bookdetail .box .bookimg img {
		width: 90%;
		height: 100%;
		margin: 0 0.5rem;
		border-radius: 0.5rem;
	}

	.bookdetail .box .box_text p {
		color: white;
		margin-top: 1.5rem;
		line-height: 1rem;
		white-space: nowrap;
		overflow: hidden;


	}

	.bookdetail .box .box_text button {
		margin-top: 1.2rem;
		border-radius: 0.2rem;
		border: none;
		width: 7.5rem;
		height: 2rem;
		background-color: #808080;
		color: white;
	}

	.el-icon-shopping-cart-2 {
		color: white;
	}

	.bookdetail .bookimg {
		margin-top: 1.5rem;
		display: flex;
	}

	.bookdetail .massage p {
		text-align: center;
		color: white;
		background-color: #808080;
		line-height: 2.5rem;
		margin: 1.4rem 0.5rem;
	}


	.bookdetail .detail {
		background-color: #808080;
		line-height: 2rem;
		margin: 1rem 0.5rem;
	}

	.bookdetail .detail .p1 {
		color: white;
		margin: 0 0.5rem;
		font-weight: 600;
	}

	.bookdetail .detail .p2 {
		color: white;
		margin: 0 0.5rem;
	}

	.massage {}

	.massage_top {
		display: flex;
		margin: 0 2rem;
		justify-content: space-between;
	}


	.massage_top button {
		border: none;
		width: 8rem;
		color: white;
		border-radius: 0.5rem;
		background-color: grey;
		height: 3rem;
		margin-bottom: 1rem;
	}

	.show {
		margin: 0 0.5rem;
		background-color: grey;
		color: white;
		
	}
	
	
	.show p{	
		margin: 0rem 0.5rem;
		line-height: 2rem;
		margin-top: 0.2rem;
	}
	
</style>